<template>
	<view class="tar-list">
		<view class="tar-list__item" v-for="(v, i) in tarList" :key="i" @click="gotoPage(v, i)">
			<image :src="selectIndex == i ? v.activeImg : v.img" mode="" class="tar-list__img"></image>
			<view>{{$t(`tarbar.index${i}`)}}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		selectIndex: {
			type: Number,
			default: 0
		}
	},
	mounted() {
		// $t('tarbar.home')
		console.log(this.$t())
	},
	data() {
		return {
			tarList: [
				{
					img: '/static/home.png',
					activeImg: '/static/home_active.png',
					text: 'Home',
					url: '/pages/index/index'
				},
				{
					img: '/static/ds.png',
					activeImg: '/static/ds_acitve.png',
					text: 'Square',
					url: '/pages/square/index'
				},
				{
					img: '/static/vp.png',
					activeImg: '/static/visa-active.png',
					text: 'Visa',
					url: '/pages/visa/index'
				},
				{
					img: '/static/uc.png',
					activeImg: '/static/uc_active.png',
					text: 'Me',
					url: '/pages/me/index'
				}
			]
		}
	},
	methods:{
		gotoPage(v, i) {
			if (this.selectIndex == i) {
				return 
			}
			uni.reLaunch({
				url: v.url
			})
		}
	}
}
</script>

<style lang="scss">
	.tar-list {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 120rpx;
		// padding-bottom: 20rpx;
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		.tar-list__item {
			flex: 1;
			text-align: center;
			font-size: 20rpx;
			color: #0078FF;
			.tar-list__img {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 16rpx auto 0;
			}
		}
	}
</style>
